<template>
    <div id="app">
        <detail-section title="地图" foottext="查看更多周边地图">
            <div ref="mapREF" class="mapREF"></div>
        </detail-section>
    </div>
</template>

<script setup>
import { onMounted, ref } from '@vue/runtime-core'
import detailSection from './detail-section.vue'
const props = defineProps({
    'mapData':{
        default:()=>({})
    }
})
const mapREF = ref();
onMounted(() => {
   setTimeout(()=>{
    var map = new BMapGL.Map(mapREF.value);          // 创建地图实例 
    var point = new BMapGL.Point(props.mapData.longitude, props.mapData.latitude);  // 创建点坐标 
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    var marker = new BMapGL.Marker(point);        // 创建标注   
    map.addOverlay(marker);                     // 将标注添加到地图中
   },1200)
})
</script>
 
<style lang="less" scoped>
.mapREF {
    height: 300px;
}
</style>